<template>
<div>
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar left-arrow title="搜索中心" @click-left="$router.back()"></van-nav-bar>
    <van-search
      show-action
      placeholder="请输入搜索关键词" shape="round" v-model.trim="keyword"
      @input="hGetSuggestion_with_jie_liu"
      >
      <div slot="action" @click="hSearch">
       搜索
        </div>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="keyword">
      <van-cell
      v-for="(item, idx) in cSuggestion"
      icon="search"
      :key="idx"
      @click="hSearchSuggestion(idx)">
      <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录">
        <van-icon v-if="history.length !== 0" name="delete" @click="emptyHistory"/>
      </van-cell>
      <van-cell v-for="(item, idx) in history" :title="item" :key="idx" @click="$router.push('/search/result?keyword=' + item)">
        <van-icon name="close" @click.stop="delHistory(idx)"/>
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { getSearch, getSearchSuggestion } from '@/api/search.js'
import { setItem, getItem } from '@/utils/storage'
const SEARCHHISTORY_KEY = 'searchHistory'
export default {
  name: 'Search',
  data () {
    return {
      // 搜索建议
      suggestion: [],
      keyword: '', // 搜索关键字,
      // 历史记录
      history: getItem(SEARCHHISTORY_KEY) || [],
      // 定时器
      timer: null
    }
  },
  created () {
  },
  computed: {
    // 高亮显示关键字
    cSuggestion () {
      // 关键字高亮显示处理
      // 使用正则替换
      return this.suggestion.map(str => str.replace(new RegExp(this.keyword, 'gi'), str => `<span style="color:red">${str}</span>`))
    }
  },
  methods: {
    // 获取搜索结果
    async getSearchResult () {
      const result = await getSearch(this.keyword)
      console.log(result)
    },
    // 获取搜索建议
    async hGetSuggestion_with_jie_liu () {
      // 检验是否为空
      if (this.timer) {
        return
      }
      // 定时器 节流操作
      this.timer = setTimeout(async () => {
        this.timer = null
        if (!this.keyword) {
          this.suggestion = []
          return
        }
        const result = await getSearchSuggestion(this.keyword)
        this.suggestion = result.data.data.options
      }, 500)
      // 请求接口获取搜索建议
    },
    // 添加搜索记录
    addHistory (str) {
      // console.log('调用了添加历史记录', this.suggestion[str])
      // 判断历史记录中是否有这一项数据
      const idx = this.history.findIndex(it => it === str)
      if (idx !== -1) {
        // 存在就删除这一项
        this.history.splice(idx, 1)
      }
      // 添加到开头
      this.history.unshift(str)
      setItem(SEARCHHISTORY_KEY, this.history)
    },
    // 点击搜索建议
    hSearchSuggestion (idx) {
      // 调用添加历史记录方法
      this.addHistory(this.suggestion[idx])
      // 跳转
      this.$router.push('/search/result?keyword=' + this.suggestion[idx])
    },
    // 点击搜索按钮 , 获取搜索结果
    hSearch () {
      // 判断关键字是否为空
      if (this.keyword === '') {
        return
      }
      this.addHistory(this.keyword)
      // 跳转到搜索结果页
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.keyword
        }
      })
    },
    // 删除历史记录
    delHistory (idx) {
      this.history.splice(idx, 1)
      setItem(SEARCHHISTORY_KEY, this.history)
    },
    // 清空历史记录
    emptyHistory () {
      this.history = []
      setItem(SEARCHHISTORY_KEY, this.history)
    }
  }
}
</script>

<style lang="" scoped>

</style>
